<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>


<input type="button" id="checkedAllBtn" value="全　选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反　选"/>
<input type="button" id="sendBtn" value="提　交"/>
</form>

<script type="application/javascript" src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
<script type="application/javascript">
    /*
     功能说明:
     1. 点击'全选': 选中所有爱好
     2. 点击'全不选': 所有爱好都不勾选
     3. 点击'反选': 改变所有爱好的勾选状态
     4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
     5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
     6. 点击'提交': 提示所有勾选的爱好
   */
    $(function () {
        var $items = $(':checkbox[name=items]');
        var $checkedAllBox = $('#checkedAllBox');

        //1. 点击'全选': 选中所有爱好
        $('#checkedAllBtn').click(function () {
            $items.prop('checked', true);
            $checkedAllBox.prop('checked', true)
        })

        // 2. 点击'全不选': 所有爱好都不勾选
        $('#checkedNoBtn').click(function () {
            $items.prop('checked', false)
            $checkedAllBox.prop('checked', false)
        })

        //3. 点击'反选': 改变所有爱好的勾选状态
        $('#checkedRevBtn').click(function () {
            //遍历，取反
            $items.each(function () {
                this.checked = !this.checked
            })
            $checkedAllBox.prop('checked', $items.filter(':not(:checked)').size()===0);
        })

        //4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
        $checkedAllBox.click(function () {
            $items.prop('checked', this.checked)
        })

        // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
        $items.click(function () {
            $checkedAllBox.prop('checked', $items.filter(':not(:checked)').size()===0);
        })

        //6. 点击'提交': 提示所有勾选的爱好
        $('#sendBtn').click(function () {
            $items.filter(':checked').each(function () {
                alert(this.value)
            })
        })

    })
</script>

</body>
</html>
